<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
  <!--<![endif]-->
  <head>
    <meta charset="utf-8">

    <!-- Use the .htaccess and remove these lines to avoid edge case issues.
    More info: h5bp.com/b/378 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>MPEG2 TS Analyzer</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Mobile viewport optimized: j.mp/bplateviewport -->
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

    <!-- CSS: implied media=all -->
    <!-- CSS concatenated and minified via ant build script-->
    <link rel="stylesheet" href="css/style.css">
    <!-- end CSS-->

    <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

    <!-- All JavaScript at the bottom, except for Modernizr / Respond.
    Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
    For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
    <script src="js/libs/modernizr-2.0.6.min.js"></script>
  </head>

  <body onload="init();">

    <div id="container">
      <!-- header area -->
      <header>
        <h1>MPEG TS Analyzer</h1>
      </header>

      <div id="div-body">
        <!-- left area in body-->
        <div id="div-left">
          <!-- file open form-->
          <form>
            <fieldset id="field-file-open">
              <legend>
                TS File
              </legend>
              <input type="file" id="ts-file" accept="video/*">
            </fieldset>
          </form>

          <!-- general information form -->
          <form>
            <fieldset id="field-general-info">
              <legend>
                General information
              </legend>
              Source: <span id="ts-file-name"> </span>
              <br>
              Size: <span id="ts-file-size"> </span>
              <br>
              Type: <span id="ts-file-type"> </span>
              <br>
              Max. Bitrates: <span id="ts-file-bitrates"> </span>
              <br>
              CC Errors: <span id="ts-file-cc-errors"> </span>
              <br>
              Reading: <span id="ts-file-reading"> </span>
            </fieldset>
          </form>

          <!-- Option form -->
          <form>
            <fieldset id="field-packet-statistics">
              <legend>
                Packet Statistics
              </legend>

              <table>
                <tr>
                  <th style="width:50px">PID</th>
                  <th style="width:60px">Share
                  <br>
                  (%)</th>
                  <th style="width:70px">Rates
                  <br>
                  (kbps)</th>
                  <th style="width:50px">Error</th>
                </tr>
                <tr class="tb-statistics-data">
                  <td class="tb-pid">0x0000</td>
                  <td class="tb-share">0.01</td>
                  <td class="tb-rates">9525</td>
                  <td class="tb-error">3</td>
                </tr>
                <tr class="tb-statistics-data">
                  <td class="tb-pid">0x0100</td>
                  <td class="tb-share">24.01</td>
                  <td class="tb-rates">100425</td>
                  <td class="tb-error">5</td>
                </tr>
              </table>
            </fieldset>
          </form>
        </div>
        <!-- end of #id-left -->

        <div id="div-right">
          <div id="id-body-right-left">
            <!-- Active PIDs area -->
            <form>
              <fieldset id="field-active-pids">
                <legend>
                  Active PIDs
                </legend>

                <ul id="id-active-pids">
                  <li>
                    <input type="checkbox" id="id-pid-pat" />
                    <div>
                      <label for="id-pid-pat">PAT</label>
                      <ul>
                        <li>
                          <input type="checkbox" id="id-pid-pmt-1" />
                          <div>
                            <label for="id-pid-pmt-1">PMT1</label>
                            <ul>
                              <li>
                                <input type="checkbox" id="id-pid-pmt-1-es-1" />
                                <div>
                                  <label for="id-pid-pmt-1-es-1">Video1</label>
                                  <ul>
                                    <li>
                                      item 1
                                    </li>
                                    <li>
                                      item 2
                                    </li>
                                    <li>
                                      item 3
                                    </li>
                                    <li>
                                      item 4
                                    </li>
                                  </ul>
                                </div>
                              </li>

                              <li>
                                <input type="checkbox" id="id-pid-pmt-1-es-2" />
                                <div>
                                  <label for="id-pid-pmt-1-es-2">Audio1</label>
                                  <ul>
                                    <li>
                                      item 1
                                    </li>
                                    <li>
                                      item 2
                                    </li>
                                    <li>
                                      item 3
                                    </li>
                                    <li>
                                      item 4
                                    </li>
                                  </ul>
                                </div>
                              </li>
                            </ul>
                          </div>
                        </li>

                        <li>
                          <input type="checkbox" id="id-pid-pmt-2" />
                          <div>
                            <label for="id-pid-pmt-2">PMT2</label>
                            <ul>
                              <li>
                                <input type="checkbox" id="id-pid-pmt-2-es-1" />
                                <div>
                                  <label for="id-pid-pmt-2-es-1">Video1</label>
                                  <ul>
                                    <li>
                                      item 1
                                    </li>
                                    <li>
                                      item 2
                                    </li>
                                    <li>
                                      item 3
                                    </li>
                                    <li>
                                      item 4
                                    </li>
                                  </ul>
                                </div>
                              </li>
                            </ul>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </li>

                  <li>
                    <input type="checkbox" id="id-pid-sdt" />
                    <div>
                      <label for="id-pid-sdt">SDT</label>
                    </div>
                  </li>
                </ul>
              </fieldset>
            </form>
          </div>
          <!-- end of #id-body-right-left -->

          <div id="id-body-right-right">
            <form>
              <fieldset id="field-packet-analysis">
                <legend>
                  Packet Analysis
                </legend>

                <div id="id-packet-control">
                  <button id="btn-packet-start-pos" type="button">
                    <img src="img/control_start.png" />
                  </button>
                  <button id="btn-packet-prev-100" type="button">
                    <img src="img/control_prev_100.png" />
                  </button>
                  <button id="btn-packet-prev" type="button">
                    <img src="img/control_prev.png" />
                  </button>
                  <button id="btn-packet-next" type="button">
                    <img src="img/control_next.png" />
                  </button>
                  <button id="btn-packet-next-100" type="button">
                    <img src="img/control_next_100.png" />
                  </button>
                  <button id="btn-packet-end-pos" type="button">
                    <img src="img/control_end.png" />
                  </button>
                </div>

                <textarea id="ta-packet-desc" name="packet_desc" rows="16" cols="40" readonly="" onfocus="this.select();">

                </textarea>                                                                                  

                <textarea id="ta-packet-raw" name="packet_raw" rows="16" cols="34" readonly="" onfocus="this.select();">

                </textarea>                
              </fieldset>
            </form>

            <form>
              <fieldset id="field-player">
                <legend>
                  Player
                </legend>

              </fieldset>
            </form>
          </div>
          <!-- end of #id-body-right-right -->

        </div>
        <!-- end of #id-body-right -->
      </div>
      <!-- end of #id-body -->

      <!-- footer area -->
      <footer>
        <p>
          &copy; Copyright by yhim
        </p>
      </footer>

    </div>
    <!--! end of #container -->

    <!-- JavaScript at the bottom for fast page loading -->

    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>
        window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')
    </script>

    <!-- scripts concatenated and minified via ant build script-->
    <script defer src="js/plugins.js"></script>
    <script defer src="js/script.js"></script>
    <!-- end scripts-->

    <!-- Change UA-XXXXX-X to be your site's ID -->
    <script>
        window._gaq = [['_setAccount', 'UAXXXXXXXX1'], ['_trackPageview'], ['_trackPageLoadTime']];
        Modernizr.load({
            load : ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
        });
    </script>

    <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
    chromium.org/developers/how-tos/chrome-frame-getting-started -->
    <!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
    <![endif]-->

  </body>
</html>
